<template>
    <div class="footers">
        <el-row>
            <el-col :span="2">
                <div class="biaoqian1">
                    <a href="">关于简书</a>

                </div>
            </el-col>
            <el-col :span="2">
                <div class="biaoqian1">
                    <a href="">联系我们</a>

                </div>
            </el-col>
            <el-col :span="2">
                <div class="biaoqian1">
                    <a href="">加入我们</a>

                </div>
            </el-col>
            <el-col :span="2">
                <div class="biaoqian1">
                    <a href="">简书出版</a>

                </div>
            </el-col>
            <el-col :span="2">
                <div class="biaoqian1">
                    <a href="">品牌与徽标</a>

                </div>
            </el-col>
            <el-col :span="2">
                <div class="biaoqian1">
                    <a href="">帮助中心</a>

                </div>
            </el-col>
            <el-col :span="2">
                <div class="biaoqian1">
                    <a href="">合作伙伴</a>

                </div>
            </el-col>

        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="biaoqian2">
                    <p style="font-size:13px;float:left;color:rgb(180,180,187);margin: 15px 0 10px 0">©2012-2019 上海佰集信息科技有限公司 / 简书 /
                        沪ICP备11018329号-5 /<img src="../assets/images/1.png">沪公网安备31010402002252号 /</p>

                </div>
            </el-col>

        </el-row>
        <el-row>

            <p style="font-size:13px;float:left;color:rgb(180,180,187)"><img src="../assets/images/2.png">简书网举报电话：021-34770013
                /<img src="../assets/images/3.png"></p>
        </el-row>

<!--        移动端-->
        <div class="yd-footer">
            <router-link :to="{path:item.path}" tag="ul" v-for="(item,index) in lists"  :key="index">
                <li>
                    <i :class="item.icon"></i>
                    <p>{{item.title}}</p>
                </li>
            </router-link>
        </div>
    </div>
</template>
<script>
    export default {
        name: "footers",
        data(){
            return{
                lists:[
                    {path:'/',icon:'el-icon-discover',title:'首页'},
                    {path:'/myGuanzhu',icon:'el-icon-collection-tag',title:'关注'},
                    {path:'/jianxinleft',icon:'el-icon-chat-dot-round',title:'消息'},
                    {path:'/yd-wode',icon:'el-icon-s-custom',title:'我的'}
                ]
            }
        },
        methods:{
            // changeColor(index){
                // this.isShow=index
            // }
        }
    }
</script>
<style>
    .footers {
        padding-left: 20%;
        width: 80%;
        height: 120px;
        margin-top: 20px;
        margin-bottom: 80px;
        margin-left: -3%;
    }

    .biaoqian1 a {
        color: rgb(202, 202, 210);
        list-style: none;
        float: left;
        text-decoration: none;

    }
    .yd-footer{
        display: none;
    }
    @media screen and (max-width: 750px) {
        .footers{
            margin-bottom: 0;
            position: fixed;
            bottom: 0;
            left: 50%;
            z-index: 5;
            transform: translateX(-50%);
            background-color: #fff;
            width:100%;
            margin-top: 0;
            height: auto;
            border-top: 1px solid #eee;
            box-shadow: 0 0 8px rgba(0,0,0,.1);
        }
        .footers .el-row{
            display: none;
        }
        .yd-footer{
            display: block;
        }
        .yd-footer li{
            float: left;
            text-align: center;
            width: 20%;
            font-size: 16px;
            color: #969696;
            margin: 2px 2% 2px 0;
            padding: 3px 0 3px 0;
        }
        /*.yd-footer li:hover{*/
            /*color: #ea6f5a;*/
            /*background-color: #f0f0f0;*/
        /*}*/
        .router-link-exact-active li{
            color: #ea6f5a;
        }
    }

</style>